<template>
  <view class="main-container">
    <!-- 标题 -->
    <view class="page-title">uni-app</view>

    <!-- 主页面输入区域 -->
    <view class="input-group">
      <view class="input-item">
        <text class="label">输入值：</text>
        <input v-model="inputValue" class="input" placeholder="请输入内容" />
      </view>
      <view class="input-item">
        <text class="label">回传值：</text>
        <view class="input input-readonly">{{ backValue }}</view>
      </view>
    </view>

    <!-- 子组件A -->
    <component-a :pass-value="inputValue" @to-comp-b="handleToCompB"></component-a>

    <!-- 子组件B -->
    <component-b :from-comp-a="compBValue" @back-to-main="handleBackToMain"></component-b>
  </view>
</template>

<script>
import componentA from "@/components/componentA.vue";
import componentB from "@/components/componentB.vue";

export default {
  components: { componentA, componentB },
  data() {
    return {
      inputValue: "Hello",
      backValue: "1001-278684",
      compBValue: ""
    };
  },
  methods: {
    handleToCompB(val) {
      this.compBValue = val;
    },
    handleBackToMain(val) {
      this.backValue = val;
    }
  }
};
</script>

<style scoped>
.main-container {
  padding: 30rpx 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-title {
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}

.input-group {
  background: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.input-item {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}
.input-item:last-child {
  margin-bottom: 0;
}

.label {
  font-size: 28rpx;
  color: #333;
  width: 120rpx;
}

.input {
  flex: 1;
  padding: 15rpx 20rpx;
  border: 1px solid #ddd;
  border-radius: 6rpx;
  font-size: 28rpx;
}

.input-readonly {
  background-color: #f9f9f9;
  color: #666;
}
</style>